<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title>ui5-input</title>


	<script src="%VITE_BUNDLE_PATH%" type="module"></script>


	<script>// delete Document.prototype.adoptedStyleSheets;</script>

</head>

<body class="input1auto">
	<form id="content"></form>
	<h3> Input with suggestions: type 'a'</h3>
	<ui5-label id="myLabelChange">Event [change] :: N/A</ui5-label><br />
	<ui5-label id="myLabelInputChange">Event [input] :: N/A</ui5-label><br />
	<ui5-label id="myLabelSelectionChange">Event [selectionChange] :: N/A</ui5-label><br />

	<div>
		<h3>Input in Cozy</h3>
		<ui5-input id="myInput" class="input2auto" show-suggestions placeholder="Search for a country ...">
		</ui5-input>

		<div>
			Change event count: <span id="myInput-change-count"></span>
		</div>
		<div id="myInput-change-result"></div>
		<div id="myInput-selection-change-result"></div>
		<div id="myInput-open-picker"></div>
	</div>

	<div class="sapUiSizeCompact">
		<h3>Input in Compact</h3>
		<ui5-input id="inputCompact" class="input2auto" show-suggestions placeholder="Search for a country ...">
		</ui5-input>
	</div>

	<div>
		<h3>Flat items</h3>

		<ui5-input show-suggestions id="flat-items-input">
		</ui5-input>
	</div>

	<br>
	<br>

	<div>
		<h3>Custom Suggestions</h3>

		<ui5-input show-suggestions id="custom">
		</ui5-input>
	</div>

	<h3>Custom Suggestions Flat</h3>

	<ui5-input placeholder="Type something ..." show-suggestions id="input-custom-flat"></ui5-input>

	<br>
	<span>SelectionChange: <span id='custom-items-selection-change-count'>0</span></span>
	<span>Item index: <span id='custom-items-selection-item-index'>-1</span></span>
	</div>

	<br />
	<br />
	<h3>Input suggestions with ui5-li</h3>
	<ui5-input id="myInput2" show-suggestions class="input3auto">
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
	</ui5-input>
	<br />
	<br />
	<h3>Input suggestions with grouping</h3>
	<ui5-input id="myInputGrouping" show-suggestions class="input3auto">
		<ui5-suggestion-item-group header-text="Content Density">
			<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
			<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
			<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		</ui5-suggestion-item-group>

		<ui5-suggestion-item-group header-text="Themes">
			<ui5-suggestion-item text="Quartz"></ui5-suggestion-item>
			<ui5-suggestion-item text="HCB"></ui5-suggestion-item>
		</ui5-suggestion-item-group>
	</ui5-input>

	<h3>Input suggestions with highlighing</h3>
	<ui5-input id="myInputHighlighted" show-suggestions class="input3auto">
		<ui5-suggestion-item text="Adam D" description="Administrative Support"></ui5-suggestion-item>
		<ui5-suggestion-item text="Aanya Sing" description="Administrative Support"></ui5-suggestion-item>
		<ui5-suggestion-item text="Allen K" description="Technical Support"></ui5-suggestion-item>
		<ui5-suggestion-item text="Alex" description="Technical Support"></ui5-suggestion-item>
	</ui5-input>

	<h3> Input disabled</h3>
	<ui5-input class="input4auto" id="input-disabled" disabled placeholder="Disabled one ...">
		<ui5-icon slot="icon" name="appointment-2"></ui5-icon>
	</ui5-input>
	<input />

	<h3> Input maxLength = 5</h3>
	<ui5-input id="input-max-length" maxLength="5" placeholder="Max length of 5"></ui5-input>

	<h3> Input valueState Positive</h3>
	<ui5-input id="input3" value-state="Positive" placeholder="Positive state ..."></ui5-input>

	<h3> Input valueState Information</h3>
	<ui5-input value-state="Information" placeholder="Info state ..."></ui5-input>

	<h3> Test 'change' event</h3>
	<ui5-input id="input1" value-state="Critical" placeholder="Warning state ..."></ui5-input>

	<h3>Input with valueState and Dynamic suggestions</h3>
	<ui5-input id="inputError" class="input2auto" show-suggestions value-state="Negative"
		placeholder="Search for a country ...">
		<div slot="valueStateMessage">Custom error value state message with a <ui5-link href="#">Link</ui5-link>.</div>
	</ui5-input>

	<h3>Input with long suggestions with valueState and ui5-li</h3>
	<ui5-input id="long-sugg" show-suggestions class="input2auto" value-state="Information">
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item
			text="Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2. text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2."></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
	</ui5-input>

	<h3>Input with disabled autocomplete (type-ahead)</h3>
	<ui5-input id="input-disabled-autocomplete" show-suggestions no-typeahead="true">
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Extra long text used as a list item. Extra long text used as a list item -2.Extra long text
		used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text
		used as a list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text
		used as a list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text
		used as a list item -2. text used as a list item -2.Extra long text used as a list item. Extra long text used as a
		list item -2.Extra long text used as a list item. Extra long text used as a list item -2.Extra long text used as a
		list item. Extra long text used as a list item -2.Extra long text used as a list item. Extra long text used as a
		list item -2."></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="CozyTwo"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
	</ui5-input>

	<h3> 'change' event result</h3>
	<ui5-input id="inputResult"></ui5-input>

	<h3> 'selection-item-select' event result</h3>
	<ui5-input id="input-selection-event-test"></ui5-input>

	<h3> Test 'input' event</h3>
	<ui5-input id="input2" value-state="Negative" placeholder="Negative state ...">
		<div slot="valueStateMessage">Information message. This is a <ui5-link href="#">Link</ui5-link>. Extra long text
			used as an
			information message. Extra long text used as an information message - 2. Extra long text used as an
			information
			message - 3.</div>
	</ui5-input>
	<h3> 'input' test result</h3>
	<ui5-input id="inputLiveChangeResult"></ui5-input>

	<h3> Input test change with suggestions</h3>
	<ui5-input id="inputChange-Suggestions" show-suggestions>
		<ui5-icon slot="icon" name="message-warning"></ui5-icon>
		<ui5-suggestion-item text="Project"></ui5-suggestion-item>
		<ui5-suggestion-item text="Fellowship"></ui5-suggestion-item>
		<ui5-suggestion-item text="Vocational Training"></ui5-suggestion-item>
	</ui5-input>

	<h3> Input test change</h3>
	<ui5-input id="inputChange"></ui5-input>

	<h3> Input test change result</h3>
	<ui5-input id="inputChangeResult"></ui5-input>
	<h3>Input test ESC</h3>
	<ui5-input id="myInputEsc" show-suggestions class="input3auto">
		<ui5-suggestion-item text="Chromium"></ui5-suggestion-item>
		<ui5-suggestion-item text="Titanium"></ui5-suggestion-item>
		<ui5-suggestion-item text="Iron"></ui5-suggestion-item>
		<ui5-suggestion-item text="Gold"></ui5-suggestion-item>
		<ui5-suggestion-item text="Silver"></ui5-suggestion-item>
	</ui5-input>

	<h3> Input readonly</h3>
	<ui5-input id="input-readonly" value="Value can`t be changed" readonly></ui5-input>
	<ui5-input id="input-readonly" placeholder="Value can`t be changed" readonly></ui5-input>

	<h3> Input required</h3>
	<ui5-input id="input-required" value="This input is required" required></ui5-input>

	<h3> Input type 'Number'</h3>
	<ui5-input id="input-number" type="Number" placeholder="Numbers are allowed only ..."></ui5-input>

	<ui5-input id="input-number2" type="Number" placeholder="Numbers are allowed only ..."></ui5-input>

	<h3> Input type 'Password'</h3>
	<ui5-input id="input-password" type="Password" placeholder="Typing in private ..."></ui5-input>

	<h3> Input type 'Email'</h3>
	<ui5-input id="input-email" type="Email" name="my-input-email"></ui5-input>

	<h3> Input type 'Tel'</h3>
	<ui5-input id="input-tel" maxlength="10" type="Tel" name="my-input-tel"></ui5-input>

	<h3> Input type 'URL'</h3>
	<ui5-input id="input-url" type="URL"></ui5-input>

	<h3> Input type 'Search'</h3>
	<ui5-input id="input-url" type="Search" show-clear-icon></ui5-input>

	<h3> Input With aria-label</h3>
	<ui5-input id="aria-label-input" accessible-name="Enter your secret password"></ui5-input>

	<h3> Readonly input with value state</h3>
	<ui5-input id="readonly-value-state-input" readonly value-state="Negative"></ui5-input>

	<h3> Inputs alignment</h3>
	<ui5-button>Press</ui5-button>
	<ui5-date-picker id='dp5' placeholder='Delivery Date...' title='Delivery Date!'>
	</ui5-date-picker>

	<ui5-date-picker id='dp5' placeholder='Delivery Date...' value-state="Negative" title='Delivery Date!'>
	</ui5-date-picker>

	<ui5-date-picker placeholder='Delivery Date...' value-state="Information" title='Delivery Date!'>
	</ui5-date-picker>

	<ui5-select id="mySelect2">
		<ui5-option>Cozy</ui5-option>
		<ui5-option selected>Compact</ui5-option>
		<ui5-option>Condensed</ui5-option>
	</ui5-select>

	<ui5-input value="input" value-state="Negative"></ui5-input>

	<ui5-select id="mySelect2" value-state="Negative">
		<ui5-option>Cozy</ui5-option>
		<ui5-option selected>Compact</ui5-option>
		<ui5-option>Condensed</ui5-option>
	</ui5-select>

	<ui5-select value-state="Information">
		<ui5-option>Cozy</ui5-option>
		<ui5-option selected>Compact</ui5-option>
		<ui5-option>Condensed</ui5-option>
	</ui5-select>

	<ui5-multi-combobox value-state="Negative"></ui5-multi-combobox>
	<ui5-multi-combobox value-state="Information"></ui5-multi-combobox>

	<h3> Input with multiple icons</h3>
	<ui5-input id="input3" placeholder="Search ...">
		<ui5-icon slot="icon" name="search" class="input5auto"></ui5-icon>
		<ui5-icon slot="icon" name="decline" class="input5auto"></ui5-icon>
	</ui5-input>

	<h3> Input firing submit event and submit action on 'ENTER' in a form</h3>
	<form id="submit-form">
		<ui5-input id="submit-input" name="my-submit-input"
			placeholder="Type something and press 'ENTER' ..."></ui5-input>
	</form>

	<h3> Test scroll pos</h3>
	<ui5-input id="scrollInput" show-suggestions>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
	</ui5-input>
	<br><br>
	<ui5-input id="scrollResult"></ui5-input>

	<h3>Test accessibleName and accessibleNameRef</h3>
	<ui5-input accessible-name="Very important input"></ui5-input>
	<br>
	<ui5-label id="enterNameLabel">Enter name: </ui5-label>
	<ui5-input accessible-name-ref="enterNameLabel"></ui5-input>

	<h3>Input suggestions with highlighing and XSS test</h3>
	<ui5-input show-suggestions class="input3auto">
		<ui5-suggestion-item text="<script>alert('XSS')</script>"
			description="Administrative Support"></ui5-suggestion-item>
		<ui5-suggestion-item text="Aanya Sing" description="<b onmouseover=alert('XSS')></b>">
		</ui5-suggestion-item>
	</ui5-input>

	<h3>Test width of suggestions popover</h3>
	<ui5-input id="suggestionsPopoverWidth" show-suggestions class="input6auto">
		<ui5-suggestion-item
			text="Argentinaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"></ui5-suggestion-item>
	</ui5-input>

	<h3>Input in a Dialog</h3>
	<ui5-button id="btnOpenDialog">Open Dialog</ui5-button>
	<ui5-dialog id="dialog">
		<ui5-input id="inputInDialog" show-suggestions class="input3auto">
			<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
			<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
			<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
			<ui5-suggestion-item text="Inactive Compact"></ui5-suggestion-item>
			<ui5-suggestion-item text="Inactive Condensed"></ui5-suggestion-item>
		</ui5-input>
	</ui5-dialog>

	<h3>Short Input With Centered Text</h3>
	<ui5-input class="short" value="244"></ui5-input>

	<h3>Input with suggestions: clear value on selection change</h3>
	<ui5-input id="change-event-value" show-suggestions>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
	</ui5-input>
	<link rel="stylesheet" type="text/css" href="./styles/Input.css">

	<h3>Test Backspace</h3>
	<ui5-input id="input-number3" type="Number" value="4"></ui5-input><br>
	<ui5-input id="input-number3-change-count" type="Number" value="0"></ui5-input><br />
	<ui5-button id="input-number3-focusout">Click</ui5-button>

	<ui5-input id="input-number31" type="Number" value="4.333"></ui5-input><br>
	<ui5-input id="input-number32" type="Number" value="4.3"></ui5-input><br>
	<ui5-input id="input-number33" type="Number" value=".33"></ui5-input><br>
	<ui5-input id="input-number34" type="Number" value="-1.33"></ui5-input><br>
	<ui5-input id="input-number35" type="Number" value="-1.33e-2"></ui5-input><br>
	<ui5-input id="input-number35_eventValue" value="-1.33e-2"></ui5-input><br>

	<h3>sap_horizon</h3>

	<div class="sap_horizon">
		<link rel="stylesheet" type="text/css" href="./styles/Input.css">
		<ui5-input placeholder="No Value State"></ui5-input>
		<ui5-input placeholder="Disabled" disabled></ui5-input>
		<ui5-input placeholder="ReadnOnly" readonly></ui5-input>
		<ui5-input id="vs-error-default" placeholder="Negative ValueState" value-state="Negative"></ui5-input>
		<ui5-input id="vs-warning-default" placeholder="Critical ValueState" value-state="Critical"></ui5-input>
		<ui5-input id="vs-success-default" placeholder="Positive ValueState" value-state="Positive"></ui5-input>
		<ui5-input id="vs-information-default" placeholder="Information ValueState"
			value-state="Information"></ui5-input>
	</div>

	<br>
	<br>

	<div id="xss-wrapper">
		<ui5-button id="xss-btn">add xss item</ui5-button>
		<ui5-input show-suggestions id="xss-input">
			<ui5-suggestion-item text=""></ui5-suggestion-item>
			<ui5-suggestion-item text="&lt;b&gt;&lt;/b&gt;"></ui5-suggestion-item>
			<ui5-suggestion-item text="3412test1234"></ui5-suggestion-item>
			<ui5-suggestion-item text="[[[b]]]"></ui5-suggestion-item>
			<ui5-suggestion-item text="&amp;amp;"></ui5-suggestion-item>
		</ui5-input>
		<span id="xss-result">NO XSS</span>
	</div>

	<br>
	<br>
	<br>

	<div>
		<h3>Inputs with clear icon</h3>

		<ui5-input id="clear-input" show-clear-icon placeholder="Type to show clear icon..."></ui5-input>
		<br />
		<br />
		<span>Change: </span><span id="clear-input-change-event-count">0</span>
		<br />
		<span>Input: </span><span id="clear-input-input-event-count">0</span>
		<br />
		<br />
		<span class="sapUiSizeCompact">
			<ui5-input id="clear-input-compact" show-clear-icon placeholder="Type to show clear icon..."
				value="test"></ui5-input>
			<br>
			<button id="clear-icon-readonly-toggle">Toggle readonly</button>
			<br>

			<button id="clear-icon-disabled-toggle">Toggle disabled</button>
		</span>
		<br />
		<br />
		<span>Input with suggestions and clear icon</span>
		<br />
		<ui5-input id="clear-input-suggestions" show-suggestions show-clear-icon
			placeholder="Type to show clear icon...">
			<ui5-suggestion-item text="text 1"></ui5-suggestion-item>
			<ui5-suggestion-item text="text 2"></ui5-suggestion-item>
			<ui5-suggestion-item text="text 3"></ui5-suggestion-item>
			<ui5-suggestion-item text="text 4"></ui5-suggestion-item>
			<ui5-suggestion-item text="text 5"></ui5-suggestion-item>
		</ui5-input>
		<br />
	</div>

	<h3>Input with open suggestions on focusin</h3>
	<ui5-input id="openPickerInput" show-suggestions show-clear-icon class="input3auto"
		placeholder="Click to show recent values...">
		<ui5-suggestion-item-group header-text="Recent Items">
			<ui5-suggestion-item type="Inactive">No recent users</ui5-suggestion-item>
		</ui5-suggestion-item-group>
	</ui5-input>

	<br>
	<br>

	<h3>Input with Dynamic Suggestions Triggering (Threshold = 3)</h3>
	<ui5-input id="dynamicTriggerInput" placeholder="Type at least 3 characters to see suggestions..." show-suggestions></ui5-input>
	<div>
		<small>Suggestions will appear after typing 3 or more characters</small>
	</div>

	<br>
	<br>

	<h3>Input - showing wrapping</h3>
	<ui5-input show-suggestions id="input-change-wrapping">
		<ui5-suggestion-item text="Item that does not wrap"></ui5-suggestion-item>
		<ui5-suggestion-item
			text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"></ui5-suggestion-item>
	</ui5-input>

	<h3>Input - change event handling</h3>

	<ui5-input id="input-change-1"></ui5-input>
	<ui5-button id="clear-button">Clear</ui5-button>
	<div>
		Change event count: <span id="input-change-count-1"></span>
	</div>

	<ui5-input show-suggestions id="input-change-2">
		<ui5-suggestion-item text="SOF"></ui5-suggestion-item>
		<ui5-suggestion-item text="USA"></ui5-suggestion-item>
	</ui5-input>
	<div>
		Change event count: <span id="input-change-count-2"></span>
	</div>

	<ui5-input id="input-change-3" type="Number" value="12.4"></ui5-input>
	<div>
		Change event value: <span id="input-change-value-3"></span>
	</div>


	<ui5-input value-state="Negative" id="dynamic-value-state">
		<span slot="valueStateMessage" id="text">0</span>
	</ui5-input>

	<br>

	<Ui5-input id="input-selection-change" show-suggestions>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
	</Ui5-input>

	<br />

	<span id="input-selection-change-count"></span>
	<span id="input-selection-change-value"></span>

	<br />

	<h3> 'select' event handling</h3>
	<ui5-input id="selectInput" value="Value to be selected"></ui5-input>
	<br>
	<span>Select event fired: <span id="select-event-counter">0</span></span>
	<br>
	<br>

	<h3>Input - open suggestions picker</h3>
	<ui5-input id="input-suggestions-open" show-suggestions>
		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
	</ui5-input>

	<br />

	<ui5-button id="dynamic-value-state-trigger">Trigger dynamic value state</ui5-button>

	<br>

	<ui5-input id="prevent-input-event"></ui5-input>
	<ui5-input id="prevent-input-event-clear-icon" value="Test" show-clear-icon></ui5-input>

	<br>

	<ui5-label id="description">Input with accessible description ref</ui5-label>
	<ui5-input accessible-description-ref="description"></ui5-input>

	<br>

	<ui5-label id="description">Input with just accessible description</ui5-label>
	<ui5-input accessible-description="Accessible description works"></ui5-input>

	<br>
	<br>
	<h3>Input Composition</h3>
	<ui5-label id="description">Input Composition with Korean Suggestions</ui5-label>
	<br>
	<ui5-input id="input-composition-korean" show-suggestions placeholder="Type in Korean ...">
		<ui5-suggestion-item text="안녕하세요"></ui5-suggestion-item>
		<ui5-suggestion-item text="고맙습니다"></ui5-suggestion-item>
		<ui5-suggestion-item text="사랑"></ui5-suggestion-item>
		<ui5-suggestion-item text="한국"></ui5-suggestion-item>
	</ui5-input>
	<br>
	<ui5-label id="description">Input Composition with Japanese Suggestions</ui5-label>
	<br>
	<ui5-input id="input-composition-japanese" show-suggestions placeholder="Type in Japanese ...">
		<ui5-suggestion-item text="こんにちは"></ui5-suggestion-item>
		<ui5-suggestion-item text="ありがとう"></ui5-suggestion-item>
		<ui5-suggestion-item text="日本"></ui5-suggestion-item>
		<ui5-suggestion-item text="東京"></ui5-suggestion-item>
	</ui5-input>
	<br>
	<ui5-label id="description">Input Composition with Chinese Suggestions</ui5-label>
	<br>
	<ui5-input id="input-composition-chinese" show-suggestions placeholder="Type in Chinese ...">
		<ui5-suggestion-item text="you好"></ui5-suggestion-item>
		<ui5-suggestion-item text="謝謝"></ui5-suggestion-item>
		<ui5-suggestion-item text="北京"></ui5-suggestion-item>
		<ui5-suggestion-item text="上海"></ui5-suggestion-item>
	</ui5-input>

	<br><br>

	<ui5-title>Form validation</ui5-title>
	<form id="formValidation">
		<ui5-message-strip id="formValidationMessage" hidden></ui5-message-strip>
		<ui5-input id="inputInForm" required type="URL">
			<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
			<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
			<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
		</ui5-input>
		<ui5-button id="btnCheckFormValidity">Check Validity</ui5-button>
	</form>
	<br><br>

	<script>
		const btnCheckFormValidity = document.getElementById('btnCheckFormValidity');
		const formValidationMessage = document.getElementById('formValidationMessage');
		const inputInForm = document.getElementById('inputInForm');

		btnCheckFormValidity.addEventListener('click', function () {
			checkFormValidity('inputInForm');
		});

		inputInForm.addEventListener('ui5-change', function () {
			setTimeout(() => {
				checkFormValidity('inputInForm', true);
			}, 0);
		});

		function checkFormValidity(elementId, delayed = false) {
			const element = document.getElementById(elementId);
			const isValid = element.checkValidity();

			element.reportValidity();

			// Show result
			formValidationMessage.hidden = false;
			formValidationMessage.innerText = `checkValidity(): ${isValid} ${delayed ? '( Delayed check )' : ''}`;
			formValidationMessage.design = isValid ? "Positive" : "Negative";
		}

		const dynamicValueState = document.getElementById("dynamic-value-state");
		const dynamicValueStateTrigger = document.getElementById("dynamic-value-state-trigger");

		dynamicValueStateTrigger.addEventListener("click", () => {
			const valueState = dynamicValueState.querySelector("[slot='valueStateMessage']");

			setInterval(() => {
				valueState.textContent = parseInt(valueState.textContent) + 1;
			}, 1000);
		});

		document.getElementById("submit-input").addEventListener("keypress", function (event) {
			if (event.key === 'Enter') {
				var formToSubmit = document.getElementById("submit-form");
				var submitEvent = new Event('submit');

				/* The old way - supported by all browsers:
				The submit method of the form won't trigger
				a submit event by itself, dispatch it manually */

				// formToSubmit.dispatchEvent(submitEvent);
				// formToSubmit.submit();

				// Fires submit event and submits
				// No MS IE11 & Safari support yet
				formToSubmit.requestSubmit()
			}
		});

		document.getElementById("submit-form").addEventListener("submit", function (event) {
			event.preventDefault();
			alert("Submitted");
		});

		btnOpenDialog.addEventListener("click", function () {
			dialog.open = true;
		});
		var sap_database_entries = [
			{
				"key": "A",
				"text": "A",
				"items": [
					{ "key": "Afg", "text": "Afghanistan" },
					{ "key": "Arg", "text": "Argentina" },
					{ "key": "Alb", "text": "Albania" },
					{ "key": "Arm", "text": "Armenia" },
					{ "key": "Alg", "text": "Algeria" },
					{ "key": "And", "text": "Andorra" },
					{ "key": "Ang", "text": "Angola" },
					{ "key": "Ast", "text": "Austria" },
					{ "key": "Aus", "text": "Australia" },
					{ "key": "Aze", "text": "Azerbaijan" },
					{ "key": "Aruba", "text": "Aruba" },
					{ "key": "Antigua", "text": "Antigua and Barbuda" }
				]
			},
			{
				"key": "B",
				"text": "B",
				"items": [
					{ "key": "Bel", "text": "Belarus" },
					{ "key": "Bel", "text": "Belgium" },
					{ "key": "Bg", "text": "Bulgaria" },
					{ "key": "Bra", "text": "Brazil" }
				]
			},
			{
				"key": "C",
				"text": "C",
				"items": [
					{ "key": "Ch", "text": "China" },
					{ "key": "Cub", "text": "Cuba" },
					{ "key": "Chil", "text": "Chili" }
				]
			},
			{
				"key": "L",
				"text": "L",
				"items": [
					{ "key": "Lat", "text": "Latvia" },
					{ "key": "Lit", "text": "Litva" }
				]
			},
			{
				"key": "P",
				"text": "P",
				"items": [
					{ "key": "Prt", "text": "Portugal" }
				]
			},
			{
				"key": "S",
				"text": "S",
				"items": [
					{ "key": "Sen", "text": "Senegal" },
					{ "key": "Ser", "text": "Serbia" },
					{ "key": "Sey", "text": "Seychelles" },
					{ "key": "Sierra", "text": "Sierra Leone" },
					{ "key": "Sgp", "text": "Singapore" },
					{ "key": "Sint", "text": "Sint Maarten" },
					{ "key": "Slv", "text": "Slovakia" },
					{ "key": "Slo", "text": "Slovenia" }
				]
			}
		];

		var input = document.getElementById('myInput');
		var inputChangeWithSuggestions = document.getElementById('inputChange-Suggestions');
		var inputGrouping = document.getElementById('myInputGrouping');
		var myInput2 = document.getElementById('myInput2');
		var inputError = document.getElementById("inputError");
		var input1 = document.getElementById('input1');
		var input2 = document.getElementById('input2');
		var inputResult = document.getElementById('inputResult');
		var inputLiveChangeResult = document.getElementById('inputLiveChangeResult');
		var labelChange = document.getElementById('myLabelChange');
		var labelInputChange = document.getElementById('myLabelInputChange');
		var oXSSButton = document.getElementById("xss-btn");
		let labelSelectionChange = document.getElementById("myLabelSelectionChange");
		var customSuggestionsInput = document.getElementById("custom");
		const flatItemsInput = document.getElementById("flat-items-input");
		const selectInput = document.getElementById("selectInput");

		let suggest = function (event) {
			let input = event.target;
			let value = input.value;
			let items = [], filteredItems = [];

			sap_database_entries.forEach(item => {
				if (item.items.length) {
					items.push(...item.items);
					return;
				}

				items.push(item);
			});

			if (value) {
				filteredItems = items.filter(function (item) {
					return item.text.toUpperCase().indexOf(value.toUpperCase()) === 0;
				});
			}

			while (input.lastChild && input.lastChild !== input.valueStateMessage[0]) {
				input.removeChild(input.lastChild);
			}

			sap_database_entries.forEach(function (item, idx) {
				if (!filteredItems || (filteredItems.indexOf(item) === -1 && !item.items?.some(groupItem => filteredItems.indexOf(groupItem) !== -1))) {
					return;
				}

				let suggestion;
				const groupItem = item.items?.length;

				if (groupItem) {
					suggestion = document.createElement("ui5-suggestion-item-group");
					suggestion.id = item.key;
					suggestion.headerText = item.text;
					item.items.forEach(function (subItem) {
						const suggestionItem = document.createElement("ui5-suggestion-item");
						suggestionItem.id = subItem.key;
						suggestionItem.text = subItem.text;
						suggestionItem.additionalText = "explore";
						suggestion.appendChild(suggestionItem);
					});

					input.appendChild(suggestion);
				} else {
					suggestion = document.createElement("ui5-suggestion-item");
					suggestion.id = item.key;
					suggestion.text = item.text
					suggestion.additionalText = "explore";
					input.appendChild(suggestion);
				}
			});

			labelInputChange.innerHTML = "Event [input] :: " + value;
		};

		const suggestCustom = e => {
			let input = e.target;
			let value = input.value;
			const generateHighlightedMarkup = window["sap-ui-webcomponents-bundle"].generateHighlightedMarkup;

			input.innerHTML = "";
			const data = [];
			sap_database_entries.forEach(item => {
				if (item.text.toUpperCase().startsWith(value.toUpperCase())) {
					data.push(item);
				} else {
					item.items.filter(subItem => subItem.text.toUpperCase().startsWith(value.toUpperCase())).forEach(subItem => {
						data.push(subItem);
					});
				}
			});


			data.forEach(function (item, idx) {
				let suggestion;
				const groupItem = item.items?.length;

				if (groupItem) {
					suggestion = document.createElement("ui5-suggestion-item-group");
					suggestion.id = item.key;
					suggestion.headerText = item.text;
					item.items.forEach(function (subItem) {
						const suggestionItem = document.createElement("ui5-suggestion-item-custom");
						suggestionItem.text = subItem.text;
						suggestionItem.innerHTML = `<div class="custom-item-content-wrapper">
						<ui5-icon name="world"></ui5-icon>
						<div class="titles-wrapper">
							<ui5-text>${generateHighlightedMarkup(subItem.text, value)}</ui5-text>
							<ui5-text>Travel the world</ui5-text>
						</div>

						<div class="status">
							<ui5-text>explore</ui5-text>
						</div>
					</div>`
						suggestion.appendChild(suggestionItem);
					});

					input.appendChild(suggestion);
				} else {
					suggestion = document.createElement("ui5-suggestion-item-custom");
					suggestion.text = item.text
					suggestion.innerHTML = `<div class="custom-item-content-wrapper">
						<ui5-icon name="world"></ui5-icon>
						<div class="titles-wrapper">
							<ui5-text>${generateHighlightedMarkup(item.text, value)}</ui5-text>
							<ui5-text>Travel the world</ui5-text>
						</div>

						<div class="status">
							<ui5-text>explore</ui5-text>
						</div>
					</div>`
					input.appendChild(suggestion);
				}
			});
		};
		const suggestFlatItems = e => {
			e.target.innerHTML = "";

			sap_database_entries.forEach(item => {
				item.items.forEach(subItem => {
					if (!subItem.text.toUpperCase().startsWith(e.target.value.toUpperCase())) {
						return;
					}

					const suggestion = document.createElement("ui5-suggestion-item");
					suggestion.text = subItem.text;
					suggestion.additionalText = subItem.key;
					e.target.appendChild(suggestion);
				});
			});
		};

		var changeCounter = 0;
		var inputCounter = 0;
		var selectionChangeCounter = 0;

		input.addEventListener("ui5-input", suggest);
		inputCompact.addEventListener("ui5-input", suggest);
		inputError.addEventListener("ui5-input", suggest);
		customSuggestionsInput.addEventListener("ui5-input", suggestCustom);
		flatItemsInput.addEventListener("ui5-input", suggestFlatItems);

		input.addEventListener("ui5-selection-change", function (event) {
			const item = event.detail.item;
			labelSelectionChange.innerHTML = "Event [selectionChange] :: " + (item ? item.id : "");
			selectionChangeCounter += 1;
			const myInputSelectionChangeResult = document.getElementById('myInput-selection-change-result');
			myInputSelectionChangeResult.innerText = selectionChangeCounter;
		});

		input.addEventListener("ui5-change", function (event) {
			labelChange.innerHTML = "Event [change] :: " + event.target.value;
			changeCounter += 1;
			inputResult.value = `${changeCounter}`;
		});

		input.addEventListener("ui5-open", () => {
			document.getElementById("myInput-open-picker").innerHTML = "Open";
		});

		input.addEventListener("ui5-close", () => {
			document.getElementById("myInput-open-picker").innerHTML = "Close";
		});

		input1.addEventListener("ui5-change", function (event) {
			changeCounter += 1;
			inputResult.value = `${changeCounter}`;
		});

		input2.addEventListener("ui5-input", function (event) {
			inputCounter += 1;
			inputLiveChangeResult.value = `${inputCounter}`;
		});

		selectInput.addEventListener("ui5-select", (e) => {
			document.getElementById("select-event-counter").innerText = parseInt(document.getElementById("select-event-counter").innerText) + 1;
		});

		var inputChangeResultCounter = 0;

		inputChange.addEventListener("ui5-change", function (event) {
			inputChangeResult.value = `${++inputChangeResultCounter}`;
		});

		inputChangeWithSuggestions.addEventListener("ui5-change", function (event) {
			inputChangeResult.value = `${++inputChangeResultCounter}`;
		});


		scrollInput.addEventListener("ui5-suggestion-scroll", function (event) {
			scrollResult.value = `${event.detail.scrollTop}`;
			console.log("scroll", { scrolltop: event.detail.scrollTop, container: event.detail.scrollContainer });
		});

		input.addEventListener("ui5-change", (event) => {
			const changeCount = document.getElementById("myInput-change-count");
			const changeResult = document.getElementById("myInput-change-result");
			changeCount.innerText = parseInt(changeCount.innerText || 0) + 1;
			changeResult.innerText += event.target.value + "\r\n";
		});

		oXSSButton.addEventListener("click", function () {
			const oXSSItem = document.createElement("ui5-suggestion-item");

			oXSSItem.text = `Canada<<img src="xss" onerror="document.getElementById('xss-result').innerText = 'XSS FOUND'">`

			document.getElementById("xss-input").appendChild(oXSSItem);
		});

		const clearInput = document.getElementById("clear-input");

		clearInput.addEventListener("ui5-change", event => {
			const span = document.getElementById("clear-input-change-event-count");

			span.innerText = span.innerText ? parseInt(span.innerText) + 1 : 1;
		});

		clearInput.addEventListener("ui5-input", event => {
			const span = document.getElementById("clear-input-input-event-count");

			span.innerText = span.innerText ? parseInt(span.innerText) + 1 : 1;
		});

		const compactClearIconInput = document.getElementById("clear-input-compact");

		document.getElementById("clear-icon-disabled-toggle").addEventListener("click", event => {
			compactClearIconInput.toggleAttribute("disabled");
		});

		document.getElementById("clear-icon-readonly-toggle").addEventListener("click", event => {
			compactClearIconInput.toggleAttribute("readonly");
		});


		const openPickerInput = document.getElementById("openPickerInput");
		let recentItems = [];
		openPickerInput.addEventListener("input", handleSuggestions);
		openPickerInput.addEventListener("selection-change", handleSelection);
		openPickerInput.addEventListener("click", handleHistory);
		openPickerInput.addEventListener("focus", () => {
			handleHistory();
			openPickerInput.open = true;
		});

		function handleSuggestions() {
			fetch('https://dummyjson.com/users?select=firstName,lastName&limit=100')
				.then(res => res.json())
				.then(({ users }) => {
					var value = openPickerInput.value;
					var suggestionItems = [];

					[].slice.call(openPickerInput.children).forEach(child => {
						openPickerInput.removeChild(child);
					});

					const recentItemsGroup = document.createElement("ui5-suggestion-item-group");
					recentItemsGroup.text = "Recent items";
					openPickerInput.appendChild(recentItemsGroup);

					if (recentItems.length) {
						recentItems.forEach(name => {
							const item = document.createElement("ui5-suggestion-item");
							item.icon = "employee";
							item.text = name;
							openPickerInput.appendChild(item);
						})
					} else {
						const noRecentItem = document.createElement("ui5-suggestion-item");
						noRecentItem.text = "No recent users";
						noRecentItem.type = "Inactive";
						openPickerInput.appendChild(noRecentItem);
					}

					if (value) {
						let currentItems = Array.from(openPickerInput.children).map(({ text }) => text);
						suggestionItems = users
							.map(({ firstName, lastName }) => `${firstName} ${lastName}`)
							.filter(item => item.toUpperCase().indexOf(value.toUpperCase()) === 0 && !currentItems.includes(item));
					}

					if (suggestionItems.length) {
						const suggestionsGroup = document.createElement("ui5-suggestion-item-group");
						suggestionsGroup.text = "Suggestions";
						openPickerInput.appendChild(suggestionsGroup);

						suggestionItems.forEach(item => {
							var li = document.createElement("ui5-suggestion-item");
							li.icon = "employee";
							li.text = item;
							openPickerInput.appendChild(li);
						});
					}
				});
		}

		function handleSelection(event) {
			const item = event.detail.item;
			if (item) {
				const name = item.text;
				const idx = recentItems.indexOf(name);
				idx > -1 && recentItems.splice(idx, 1);
				recentItems.unshift(name);
				recentItems.length > 5 && recentItems.pop();
			} else {
				recentItems = [];
			}
		}

		function handleHistory() {
			handleSuggestions();
		}

		document.getElementById("clear-button").addEventListener("click", event => {
			document.getElementById("input-change-1").value = "";
		});

		document.getElementById("input-change-1").addEventListener("ui5-change", (event) => {
			const changeCount = document.getElementById("input-change-count-1");
			changeCount.innerText = parseInt(changeCount.innerText || 0) + 1;
		});

		document.getElementById("input-change-2").addEventListener("ui5-change", (event) => {
			const changeCount = document.getElementById("input-change-count-2");
			changeCount.innerText = parseInt(changeCount.innerText || 0) + 1;
		});

		document.getElementById("input-change-3").addEventListener("ui5-change", (event) => {
			const changeCount = document.getElementById("input-change-value-3");
			changeCount.innerText = event.target.value;
		});

		document.getElementById("input-number35").addEventListener("ui5-input", event => {
			const resultInput = document.getElementById("input-number35_eventValue");
			resultInput.value = event.target.value;
		});

		document.getElementById("change-event-value").addEventListener("ui5-change", event => event.target.value = "");

		const spanChangeValue = document.getElementById("input-selection-change-value");
		const spanChangeCount = document.getElementById("input-selection-change-count");

		document.getElementById("input-selection-change").addEventListener("ui5-selection-change", e => {
			const text = e.detail.item ? e.detail.item.text : "";
			selectionChangeCounter++;
			spanChangeValue.innerText = text;
			spanChangeCount.innerText = selectionChangeCounter;
			console.log(text);
		});

		const countries = [
			"Albania",
			"Andorra",
			"Austria",
			"Belarus",
			"Belgium",
			"Bulgaria",
			"Croatia",
			"Germany",
			"Denmark",
		];

		const customFlatInput = document.getElementById("input-custom-flat");

		customFlatInput.addEventListener("ui5-input", event => {
			const value = event.target.value;
			const filtered = countries.filter(country => country.toLowerCase().startsWith(value.toLowerCase()));

			fillInput(filtered, value)
		});

		const fillInput = (data, value) => {
			const generateHighlightedMarkup = window["sap-ui-webcomponents-bundle"].generateHighlightedMarkup;
			customFlatInput.innerHTML = "";

			data.forEach((country) => {
				const item = document.createElement("ui5-suggestion-item-custom");
				item.setAttribute("text", country);

				item.innerHTML = `
					<div class='item-content'>
						<ui5-icon name="globe"></ui5-icon>
						<div class='item-titles'>
							<span>${generateHighlightedMarkup(country, value)}</span>
							<small>EU</small>
						</div>

						<span class='green'><b>EU</b></span>
					</div>
				`
				customFlatInput.appendChild(item);
			});
		};

		customFlatInput.addEventListener("ui5-selection-change", e => {
			const text = e.detail.item?.text;
			const invisibleMessage = window["sap-ui-webcomponents-bundle"].invisibleMessage;
			const selChangeFireCount = document.getElementById("custom-items-selection-change-count");
			const selChangeItemIndex = document.getElementById("custom-items-selection-item-index");

			selChangeFireCount.innerText = parseInt(selChangeFireCount.innerText || 0) + 1;
			selChangeItemIndex.innerText = customFlatInput.suggestionItems.indexOf(e.detail.item);

			invisibleMessage.announce(text, "Polite");
		})

		document.getElementById("input-number3").addEventListener("ui5-input", () => {
			const inputNumber3ChangeCount = document.getElementById("input-number3-change-count");
			inputNumber3ChangeCount.value = (parseInt(inputNumber3ChangeCount.value) + 1).toString();
		});

		document.getElementById("prevent-input-event").addEventListener("ui5-input", event => {
			if (event.target.value.length > 3) {
				event.preventDefault();
			}
		});

		document.getElementById("prevent-input-event-clear-icon").addEventListener("ui5-input", event => {
			event.preventDefault();
		});

		// Dynamic Suggestions Triggering with Threshold
		const dynamicTriggerInput = document.getElementById("dynamicTriggerInput");
		const THRESHOLD = 3;

		const countriesForDynamicTrigger = [
			"Albania", "Andorra", "Armenia", "Austria", "Azerbaijan",
			"Belarus", "Belgium", "Bosnia and Herzegovina", "Bulgaria",
			"Croatia", "Cyprus", "Czech Republic", "Denmark",
			"Estonia", "Finland", "France", "Georgia", "Germany", "Greece",
			"Hungary", "Iceland", "Ireland", "Italy", "Kazakhstan",
			"Kosovo", "Latvia", "Liechtenstein", "Lithuania", "Luxembourg",
			"Malta", "Moldova", "Monaco", "Montenegro", "Netherlands",
			"North Macedonia", "Norway", "Poland", "Portugal", "Romania",
			"Russia", "San Marino", "Serbia", "Slovakia", "Slovenia",
			"Spain", "Sweden", "Switzerland", "Turkey", "Ukraine",
			"United Kingdom", "Vatican City"
		];

		dynamicTriggerInput.addEventListener("input", () => {
			const value = dynamicTriggerInput.value;

			while (dynamicTriggerInput.lastChild) {
				dynamicTriggerInput.removeChild(dynamicTriggerInput.lastChild);
			}

			if (value.length >= THRESHOLD) {
				dynamicTriggerInput.showSuggestions = true;

				const filteredCountries = countriesForDynamicTrigger.filter(country =>
					country.toLowerCase().startsWith(value.toLowerCase())
				);

				filteredCountries.forEach(country => {
					const suggestion = document.createElement("ui5-suggestion-item");
					suggestion.text = country;
					dynamicTriggerInput.appendChild(suggestion);
				});
			}
		});
	</script>
</body>

</html>